<template>
	<view class="box">

		<view class="info">
			<view v-if="!video.id" class="img_box" @click="toPlay(1)">
				<image :src="info.iimage" class="iimg"></image>
				<view class="i_z"></view>
				<image src="@/static/bf.png" class="i_icon" mode="widthFix"></image>
			</view>
			<view v-else>
				<video class="video" object-fit="fill" :autoplay="true" :src="video.fimage"></video>
			</view>
			<view class="name_box">
				<view class="name">{{info.name}}</view>
				<view class="right">
					<view>
						<text class="msg">价格:</text>
						<text class="msg red">￥</text>
						<text class="red price">{{info.price}}</text>
					</view>
					<view class="num">{{info.num}}</view>
				</view>
			</view>
			<view class="tea_box">
				<image :src="info.tea.iimage" class="timg"></image>
				<view class="t_info">
					<view class="t_name">{{info.tea.name}}</view>
					<view>{{info.tea.gx}}</view>
				</view>
				<text class="iconfont iconfanhui t-180 gray_font"></text>
			</view>
		</view>
		<view class="content_box">
			<view class="tab_box b_flex_c_s">

				<my-s-tabs effect slot-title v-model="check" lineHeight='1' activeColor="#BC7127" lineColor="#BC7127"
					navPerView="2" lineScale='0.5'>
					<my-s-tab v-for="(item, index) of tabList" :key="index">{{ item.name }}</my-s-tab>
				</my-s-tabs>

			</view>
			<view class="c_box" v-if="check<1">
				<rich-text :nodes="info.content" v-if="info.content"></rich-text>
			</view>
			<view class="c_box" v-else>

				<view class="btn_box" v-for="(item,index) in info.video" :key="index">

					<view>{{item.name}}</view>
					<view :class="['btn_b',video.id==item.id?'btn_play':'']" @click="play(item)">
						<text v-if="video.id==item.id">播放中</text>
						<text v-else>播放视频</text>
						</view>
				</view>

			</view>
		</view>
		<view class="tc"></view>
		<view v-if="!info.isPay" :class="['btn',system=='ios'?'pm':'']"  @click="toPlay(2)">我要报名</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{id:''},
				info: {},
				tabList: [{
						name: '课程介绍',
						id: 1
					},
					{
						name: '课程列表',
						id: 2
					}
				],
				check: 0,
				system:'',
				video:{id:''}
			}
		},
		onLoad(e) {
			if (e.id) {
				this.params.id=e.id;
				
			}
		},
		onShow() {
		this.system = uni.getSystemInfoSync().platform;	
		this.getInfo();
		},
		methods: {
			play(e){
				let _=this;
				if (!uni.getStorageSync('userToken')) {
					uni.showModal({
						title: '温馨提醒',
						content: '亲,请登录后报名',
						cancelColor: '#999',
						confirmColor: "#FF7133",
						success: function(res) {
							if (res.confirm) {
								getApp().globalData.isReload = true;
								uni.navigateTo({
									url: '/pages/account/wxlogin?type=1'
								})
							}
						}
					})
				}else{
					
				
						
						if(!this.info.isPay){
							uni.showModal({
								title: '温馨提醒',
								content: '亲，请购买后观看！',
								cancelColor: '#999',
								confirmColor: "#FF7133",
								success: function(res) {
									if (res.confirm) {
									
										uni.navigateTo({
											url: '/pages/video/order?id='+_.params.id
										})
									}
								}
							})
						}else{
							this.video=e;
						}
						
					
					
					
					
					
				}
			},
			toPlay(type=1) {
				let _=this;
				if (!uni.getStorageSync('userToken')) {
					uni.showModal({
						title: '温馨提醒',
						content: '亲,请登录后报名',
						cancelColor: '#999',
						confirmColor: "#FF7133",
						success: function(res) {
							if (res.confirm) {
								getApp().globalData.isReload = true;
								uni.navigateTo({
									url: '/pages/account/wxlogin?type=1'
								})
							}
						}
					})
				}else{
					
					if(type==1){
						
						if(!this.info.isPay){
							uni.showModal({
								title: '温馨提醒',
								content: '亲，请购买后观看！',
								cancelColor: '#999',
								confirmColor: "#FF7133",
								success: function(res) {
									if (res.confirm) {
									
										uni.navigateTo({
											url: '/pages/video/order?id='+_.params.id
										})
									}
								}
							})
						}else{
							this.video=this.info.video[0];
						}
						
					
					}
					
					if(type==2){
						uni.navigateTo({
							url: '/pages/video/order?id='+_.params.id
						})
					}
					
				}
			},
			getInfo(e) {
				this.$get(this.$api.kcInfo, this.params, res => {
					if (res.data.data.content) {
						res.data.data.content = this.$formatRichText(res.data.data.content).replace(/src="\//g,
							'src="' + getApp().globalData
							.imgRemote + '/');
					}
					this.info = res.data.data;



				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;
		padding: 6rpx 0 0 0;
		background-color: white;
		min-height: 100vh;
	}

	.iimg {
		width: 100%;
		height: 400rpx;
		border-radius: 15rpx 15rpx 0 0;
		z-index: 1;
	}

    .video{
		width: 100%;
		height: 400rpx;
	}

	.info {
		background-color: #D8D6D7;
		border-radius: 15rpx 15rpx 0 0;
	}

	.name_box {
		box-sizing: border-box;
		padding: 2rpx 50rpx 12rpx 50rpx;
	}

	.name {

		font-size: 30rpx;
	}

	.right {
		display: flex;
		justify-content: space-between;
	}

	.msg {
		font-size: 24rpx;
	}

	.num {
		font-size: 22rpx;
	}

	.price {
		font-weight: bold;
		font-size: 30rpx;
	}

	.red {
		color: #CA1712;
	}

	.tea_box {
		box-sizing: border-box;
		padding: 20rpx 50rpx;
		background-color: #EDEDED;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.timg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.t_info {
		width: 72%;
		font-size: 22rpx;
	}

	.t_name {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.tab_box {
		border-bottom: 1rpx solid #D7D7D7;
		height: 66rpx;
	}

	.c_box {
		box-sizing: border-box;
		padding: 30rpx 60rpx;
	}

	.img_box {
		position: relative;
		text-align: center;
	}

	.i_z {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.3;
		border-radius: 15rpx 15rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.i_icon {
		position: absolute;
		top: 40%;
		left: 45%;
		z-index: 100;
		width: 100rpx;
	}

    .tc{
		height: 120rpx;
	}
	.btn {
		position: fixed;
		bottom: 0rpx;
		left: 0%;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		text-align: center;
		color: white;
		background-color: #E1521A;
		font-size: 36rpx;
	}
	.pm {
		bottom: 45rpx;
	}
	.btn_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	.btn_b{
		box-sizing: border-box;
		padding: 10rpx 0;
		width: 180rpx;
		text-align: center;
		border-radius: 40rpx;
		background-color:#AB8C6D ;
		color: white;
	}
	.btn_play{
		background-color:#E1521A ;
	}
</style>